<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>炫彩按钮动效</title>
		<style type="text/css">
			body {
				height: 100vh;
				width: 100vw;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #000000;
			}

			a {
				position: relative;
				width: 400px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				text-decoration: none;
				color: honeydew;
				border-radius: 50px;
				background-image: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #09a8f4);
				background-size: 400%;
				position: relative;
				font-size: 20px;
				font-weight: bold;
				letter-spacing: .5em;
				animation: move 8s linear infinite;
			}

			a::before {
				content: '';
				position: absolute;
				top: -5px;
				left: -5px;
				bottom: -5px;
				right: -5px;
				border: 1px solid red;
				border-radius: 50px;
				background-image: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #09a8f4);
				background-size: 400%;
				z-index: -1;
				filter: blur(20px);
			}

			@keyframes move {
				from {}

				to {
					background-position: -400% 0;
				}
			}
		</style>
	</head>
	<body>
		<a href="#">炫彩按钮动效</a>
	</body>
</html>
